<template>
  <div class="list">
    <el-row>
      <el-col :xs="{span:22,offset:1}" :sm="24">
        <template v-if="!isZero">
          <ul class="lists">
            <li v-for="(item, index) in listitems" :key="item.id" v-if="todolist ? !item.status : item.status">
              <span class="lists-content" :class="item.status ? contentActCls : ''">{{index + 1}}. {{item.content}}</span>
              <div class="lists-btn">
                <template v-if="todolist">
                  <el-button size="mini" type="primary" @click="updateFn(index)">完成</el-button>
                  <el-button size="mini" :plain="true" @click="deleteFn(index)" type="danger">删除</el-button>
                </template>
                <template v-else>
                  <el-button size="mini" type="primary" @click="updateFn(index)">还原</el-button>
                </template>
              </div>
            </li>
          </ul>
        </template>
        <template v-else>
          <div> {{nolisttxt}} </div>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      contentActCls: 'lists-content-finished'
    }
  },
  props: {
    todolist: Boolean,
    listitems: Array,
    nolisttxt: String,
    isZero: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    deleteFn: function (index) {
      this.$emit('delete-fn', index)
    },
    updateFn: function (index) {
      this.$emit('update-fn', index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .lists{
    width: 100%;
    li{
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #ededed;
      .lists-content{
        display: inline-block;
        height: 28px;
        line-height: 28px;
        max-width: 220px;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .lists-content-finished{
        color:#bfbaba;
        text-decoration: line-through;
      }
      .lists-btn{
        display: flex;
      }
    }
  }
</style>
